<template>
  <div style="overflow: hidden" class="eventCenterContainer">

    <!-- 事件类型选择 -->
    <div class="eventDrop">
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          {{ seldrop }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            :command="item.value"
            v-for="(item, index) in dropdown"
            :key="index"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="title" @click="openEventCenter">事件中心</div>
    <div class="date">
      <el-date-picker
        v-model="defaultRange"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleChange"
      >
      </el-date-picker>
    </div>

    <el-row>
      <el-col :span="12" v-for="(item, index) in set" :key="index">
        <p class="name">{{ item.name }}</p>
        <span class="value">{{ item.value }}</span>
        <span class="type">个</span>
      </el-col>
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%"
      height="250px"
      @row-click="rowClick"
    >
      <el-table-column prop="source" label="事件来源" width="80">
        <template slot-scope="scope">
          <marquee scrollamount="3" ref="mqe">{{ scope.row.source }}</marquee>
        </template>
      </el-table-column>
      <el-table-column prop="eventDesc" label="事件描述" width="140">
        <template slot-scope="scope">
          <marquee scrollamount="3" ref="mqe">{{
            scope.row.eventDesc
          }}</marquee>
        </template>
      </el-table-column>
      <el-table-column prop="occurLocation" label="发生地址" width="130">
        <template slot-scope="scope">
          <marquee scrollamount="3" ref="mqe">{{
            scope.row.occurLocation
          }}</marquee>
        </template>
      </el-table-column>
      <el-table-column prop="reportTime" label="发生时间" width="80">
        <template slot-scope="scope">
          <marquee scrollamount="3" ref="mqe">{{
            scope.row.reportTime
          }}</marquee>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === '已办结'" class="done">{{scope.row.status}}</span>
          <span v-else class="process">{{scope.row.status}} <img src="../../assets/image/left/yzqj.png" width="25px" height="25px" @click.stop="processImgClick(scope.row)" /> </span>
          <!-- <span :class="scope.row.status === '已办结' ? 'done' : 'process'">{{scope.row.status}}</span> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getTownEventCenter } from "../../utils/api";
export default {
  name: "eventCenter",
  data() {
    return {
      defaultRange: [],
      set: [
        {
          name: "处理中",
          value: "0",
        },
        {
          name: "已完成",
          value: "0",
        },
      ],

      tableData: [],
      startTime: this.Tebs.getBeforeDate(29) + " 00:00:00",
      endTime: this.Tebs.date2String_OnlyDate(new Date()) + " 23:59:59",
      dialogVisible: false,

      // yhadd
      dropdown: [
        {
          name: "全部",
          value: "all",
        },
        {
          name: "矛调协同平台",
          value: "type1",
        },
        {
          name: "基层治理四平台",
          value: "type2",
        },
        {
          name: "浙里访",
          value: "type3",
        },
        {
          name: "村情通",
          value: "type4",
        },
        {
          name: "邻礼通",
          value: "type5",
        },
        {
          name: "政企通",
          value: "type6",
        },
        {
          name: "掌上指挥",
          value: "type7",
        },
        {
          name: "其他",
          value: "other",
        },
      ],
      seldrop: "全部",
      isShowHandheld: false,
      source: null,
      sourceId: null,
      isShowHandheld1: false,
      showUrl: null,
    };
  },
  mounted() {
    this.defaultRange = [this.startTime, this.endTime];
    this.getData();
  },
  methods: {
    openEventCenter(){
      window.eventCenterDetailsInit();
    },
    handleChange(value) {
      this.startTime = this.Tebs.date2String_OnlyDate(value[0]) + " 00:00:00";
      this.endTime = this.Tebs.date2String_OnlyDate(value[1]) + " 23:59:59";
      this.getData();
    },
    getData() {
      let me = this;
      getTownEventCenter(
        "startTime=" + this.startTime + "&endTime=" + this.endTime
      ).then((res) => {
        if (res.data.status === 200) {
          me.set[0].value = res.data.data.process;
          me.set[1].value = res.data.data.done;
          me.tableData = [];
          me.tableData = JSON.parse(JSON.stringify(res.data.data.list));
          for (let i = 0, l = me.tableData.length; i < l; i++) {
            me.tableData[i].status =
              me.tableData[i].status === "process" ? "处理中" : "已办结";
          }
        }
      });
    },

    // yhadd
    // 每一行点击时触发
    rowClick(row) {
      if (row.source === '掌上指挥') {
        this.handleHeld(row)
      } else {
        window.eventDialogInit(row)
      }
    },

    handleHeld(params) {
      if (params.source === '掌上指挥' && params.palmFlag === 1) {
       this.isShowHandheld1 = true
       
       this.showUrl = params.showUrl;
       window.zszhInit(this.showUrl);
      } else {
        this.isShowHandheld = true
        this.source = params.source;
        this.sourceId = params.sourceId;
        window.handeldCommandInit(this.source,this.sourceId);
      }
    },

    // 处理中的事件点击
    processImgClick(info){
      this.handleHeld(info);
    },
    handleCommand(command) {
      for (let i = 0, l = this.dropdown.length; i < l; i++) {
        if (command === this.dropdown[i].value) {
          this.seldrop = this.dropdown[i].name;
        }
      }
      let me = this;
      var temseldrop = this.seldrop;
      if(this.seldrop=="全部"){
        temseldrop = "";
      }
      
      getTownEventCenter(
        "startTime=" + this.startTime + "&endTime=" + this.endTime + "&source=" + temseldrop
      ).then((res) => {
        if (res.data.status === 200) {
          me.tableData = JSON.parse(JSON.stringify(res.data.data.list));
          for (let i = 0, l = me.tableData.length; i < l; i++) {
            me.tableData[i].status =
              me.tableData[i].status === "process" ? "处理中" : "已办结";
          }
        }
      });
    },

    isCloseForm(value) {
      this.isShowHandheld = value
    },

    handleReport(url) {
      console.log(url, 'url')
      this.showUrl = url
      this.isShowHandheld1 = true
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 300px;
  height: 60px;
  background-image: url("../../assets/image/global/title.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 60px;
  font-size: 24px;
  font-style: oblique;
  color: #fff;
  padding-left: 40px;
  cursor: pointer;
}

.el-range-editor {
  background: linear-gradient(
    0deg,
    rgba(22, 79, 58, 0.7),
    rgba(5, 35, 29, 0.7)
  );
  border: 1px solid #0affbd;
  box-shadow: 0px 0px 8px 0px rgba(2, 45, 33, 0.46);
  opacity: 0.8;
  width: 94%;
  margin-left: 3%;
  margin-top: 5px;
}

.el-row {
  width: 100%;
  margin-top: 5px;
}
.el-col-12 {
  width: 200px;
  height: 52px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 20px;
  margin-top: 10px;
  font-size: 16px;
  padding-left: 20px;
  line-height: 24px;
}
.el-col-12:nth-child(1) {
  background-image: url("../../assets/image/left/set1.png");
}
.el-col-12:nth-child(2) {
  background-image: url("../../assets/image/left/set2.png");
}
.name {
  color: #b4e0f0;
}
.value {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}
.el-col-12:nth-child(1) .type {
  color: #02b7fa;
}
.el-col-12:nth-child(2) .type {
  color: #02fa48;
}
.type1 {
  color: #f33838;
}
.type2 {
  color: #01decc;
}
.el-table {
  background: unset;
  margin-top: 5px;
}
.done {
  color: rgb(26, 248, 187);
}
.process {
  color: rgb(24, 159, 249);
}
/* yhadd */
.eventCenterContainer {
  position: relative;
}
.eventDrop{
  position: absolute;
  right: 10px;
  top: 20px;
}
.el-dropdown {
  width: 170px;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  color: #fff;
  padding-left: 20px;
  box-sizing: border-box;
  background: linear-gradient(
    0deg,
    rgba(22, 79, 58, 0.7),
    rgba(5, 35, 29, 0.7)
  );
  border: 1px solid #0affbd;
  box-shadow: 0px 0px 8px 0px rgba(2, 45, 33, 0.46);
  border-radius: 1px;
}
</style>
